<template>
	<view class="Global">
			<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
			<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>


		<scroll-view scroll-y="true"  class="content" :style="'height:'+scrollViewHeight+'px'">
			<view  class="contentCenter">


				<view class="contentTopTips">
					<text class="contentTopTipsText">
						请选择尺码和颜色，并填入数量，
					</text>
					<text class="contentTopTipsText">
						勾选行复制或列复制可提高录入效率
					</text>
				</view>


				<view class="contentSizeTop">
					<text class="contentSizeTopText">尺码选择</text>
					<view class="contentSizeTopRight">
						<image class="contentSizeTopImg" src="/static/logo.png" mode=""></image>
						<text class="contentSizeTopTextRight">预置</text>
					</view>
				</view>


				<!-- 尺码列表开始 -->
				<view class="baseListItemColorRight">





					<view class="baseListItemColorRightItem" v-for="(item,index) in sizeListData">
						<view class="baseListItemColorLeftInnerItemRight" v-if="item.select==false" @click="selectSizeClick(item)">

							<text class="baseListItemColorLeftInnerText">{{item.sizeName}}</text>
						</view>

						<view class="baseListItemColorLeftInnerItemRightSelect" v-else  @click="selectSizeClick(item)">

							<text class="baseListItemColorLeftInnerTextSelect">{{item.sizeName}}</text>
						</view>
					</view>





				</view>
				<!-- 尺码列表结束 -->



				<view class="contentSizeTop">
					<text class="contentSizeTopText">颜色选择</text>
					<view class="contentSizeTopRight">
						<image class="contentSizeTopImg" src="/static/logo.png" mode=""></image>
						<text class="contentSizeTopTextRight">预置</text>
					</view>
				</view>


				<!-- 颜色列表开始 -->
				<view class="baseListColor">
					<view class="baseListItemColor">

						<!-- 左边颜色系列 -->

						<scroll-view scroll-y="true" class="baseListItemColorLeft" v-if="false">
							<view class="baseListItemColorLeft">

								<view class="baseListItemColorLeftInner" v-for="(item,index) in colorListData">
									<view class="baseListItemColorLeftInnerItem">
										<view class="baseListItemColorLeftInnerBg" :style="{backgroundColor:item.color}">
										</view>
										<text class="baseListItemColorLeftInnerText">{{item.title}}</text>
									</view>
								</view>

							</view>

						</scroll-view>

						<!-- 右边颜色系列对应明细 -->
						<scroll-view scroll-y="true" class="baseListItemColorRight2">
							<view class="baseListItemColorRight2">





								<view class="baseListItemColorRightItem2" v-for="(item,index) in colorList">
									<view class="baseListItemColorLeftInnerItemRight2" v-if="item.select==false" @click="colorSelectClick(item)">
<!--										<view class="baseListItemColorLeftInnerBg" :style="{backgroundColor:item.color}">-->
<!--										</view>-->
										<text class="baseListItemColorLeftInnerText">{{item.colorName}}</text>
									</view>


									<view class="baseListItemColorLeftInnerItemRight2Select" v-else @click="colorSelectClick(item)">
<!--										<view class="baseListItemColorLeftInnerBg" :style="{backgroundColor:item.color}">-->
<!--										</view>-->
										<text class="baseListItemColorLeftInnerText">{{item.colorName}}</text>
									</view>
								</view>







							</view>

						</scroll-view>

					</view>
				</view>

				<!-- 颜色列表结束 -->












				<view class="contentSizeTop">
					<text class="contentSizeTopText">裁床列表</text>
					<view class="contentSizeTopRight">
						<text class="contentSizeTopTextRight"></text>
					</view>
				</view>




				<!-- 裁床列表开始 -->
				<view class="caichuangContent">

					<view class="contentSizeTop1">
						<text class="contentSizeTopText">床号</text>
						<input class="caichuangContentInput" type="text" value="请填写" />
					</view>

					<view class="line"></view>



					<checkbox-group class="contentSizeTopCheckbox" name="contentSizeTopCheck">
						<label>
							<checkbox style="transform:scale(0.7)" value="" /><text class="contentSizeTopText1">行复制</text>
						</label>
						<label>
							<checkbox style="transform:scale(0.7)" value="" /><text class="contentSizeTopText1">列复制</text>
						</label>
					</checkbox-group>



					<!-- <view class="Content_JiuGongGe_List_OutSide">

						<view class="Content_JiuGongGe_List_Out" v-for="(item,index) in jiugonggeListData">

							<view class="Content_JiuGongGe_List" v-if="index==0">

								<text class="Content_JiuGongGe_List_Blue">{{item.title}}</text>
								<text class="Content_JiuGongGe_List_Blue">{{item.size}}</text>
								<text class="Content_JiuGongGe_List_Blue">{{item.total}}</text>

							</view>

							<view class="Content_JiuGongGe_List" v-if="index!=0">

								<text class="Content_JiuGongGe_List_Blue">{{item.title}}</text>
								<text class="Content_JiuGongGe_List_Black">{{item.size}}</text>
								<text class="Content_JiuGongGe_List_Black">{{item.total}}</text>

							</view>

							<view class="line" v-if="index<jiugonggeListData.length-1"></view>

						</view>

					</view>
			 -->


					<!-- 数据列表开始 -->

					<scroll-view scroll-x="true" class="srollColorData">
						<view class="dataContent">





							<view class="contentCenterTitle">
								<text class="contentCenterTitleText">#</text>
								<text class="contentCenterTitleText1">行复制</text>
								<text class="contentCenterTitleText">扎数</text>
								<text class="contentCenterTitleText">颜色</text>
								<text class="contentCenterTitleText" v-for="(item,index) in sizeListData"
									v-if="item.select">{{item.sizeName}}</text>
								<!-- <text class="contentCenterTitleText">L</text>
								<text class="contentCenterTitleText">XL</text>
								<text class="contentCenterTitleText">XXL</text> -->


							</view>


							<view class="contentCenterList" v-for="(itemH,indexH) in colorListNewSelect">



								<!-- <text class="contentCenterListText">1</text> -->
								<input disabled="false" type="text" :value="indexH+1" class="contentCenterListInputText"
									v-if="indexH%2!=0" />
								<image src="/static/cuttingorder/weigou.png" class="contentCenterListNoImg" mode=""
									v-if="indexH%2!=0 && itemH.chooseLine==false" @click="chooseImg(indexH)">
								</image>
								<image src="/static/cuttingorder/gou.png" class="contentCenterListNoImg" mode=""
									v-if="indexH%2!=0 && itemH.chooseLine==true" @click="chooseImg(indexH)">
								</image>
								<!-- <image src="/static/cuttingorder/gou.png" class="contentCenterListNoImg" mode=""></image> -->
								<input type="text" placeholder="数量" class="contentCenterListInput" v-if="indexH%2!=0"
									@input="inputDataZhaNum($event, indexH)" />

								<input disabled="false" type="text" :value="itemH.colorName"
									class="contentCenterListInputText" v-if="indexH%2!=0 && itemH.select==true" />
								<input type="text" placeholder="数量" class="contentCenterListInput"
									v-for="(item,index) in sizeListData" v-if="item.select && indexH%2!=0 "
									@input="inputData($event, index,indexH,item,itemH)" />
								<!-- 	<input type="text" placeholder="数量" class="contentCenterListInput" />
								<input type="text" placeholder="数量" class="contentCenterListInput" />
								<input type="text" placeholder="数量" class="contentCenterListInput" /> -->




								<!-- 偶数行底色不一样 -->
								<input disabled="false" type="text" :value="indexH+1"
									class="contentCenterListInputText1" v-if="indexH%2==0" />
								<image src="/static/cuttingorder/gou.png" class="contentCenterListNoImg1" mode=""
									v-if="indexH%2==0 && itemH.chooseLine==true" @click="chooseImg(indexH)">
								</image>
								<image src="/static/cuttingorder/weigou.png" class="contentCenterListNoImg1" mode=""
									v-if="indexH%2==0 && itemH.chooseLine==false" @click="chooseImg(indexH)">
								</image>
								<!-- <image src="/static/cuttingorder/gou.png" class="contentCenterListNoImg" mode=""></image> -->
								<input type="text" placeholder="数量" class="contentCenterListInput1" v-if="indexH%2==0"
									@input="inputDataZhaNum($event,indexH)" />

								<input disabled="false" type="text" :value="itemH.colorName"
									class="contentCenterListInputText1" v-if="indexH%2==0 && itemH.select==true" />
								<input type="text" placeholder="数量" class="contentCenterListInput1"
									v-for="(item,index) in sizeListData" v-if="item.select && indexH%2==0 "
									@input="inputData($event, index,indexH,item,itemH)" />


							</view>
















						</view>
					</scroll-view>

			<!-- 数据列表结束 -->


				</view>
				<!-- 裁床列表结束 -->






			</view>


		</scroll-view>



	<view class="loginContent" id="mainBottom">

			<button @click="addOrderSplittingUp"  style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>



	</view>


</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
  import bgImage from '@/components/backgroundImage.vue'
  import {
    getColorManagerList,
    getSizeManagerList,
    addSplittingUpByList
  } from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {

				// 九宫格列表
				jiugonggeListData: [{
						title: '色/码',
						size: 'XXS',
						total: '合计'
					},
					{
						title: '黑',
						size: '10',
						total: '10'
					},
					{
						title: '合计',
						size: '10',
						total: '10'
					}

				],


				login: '添加保存',

				title: '批量添加扎',
				isback: true,


				// 尺码列表
				sizeListData: [],


				// 选中的颜色列表
				colorListNewSelect:[],
				// 选中的尺码
				sizeListNewSelect: [],
				// 选择的扎号
				inputDataZhaNumList:[],



				colorList: [],

				// 颜色外观列表
				colorListData: [
            {
						color: '#EDEE00',
						title: '黄色系列',
						colorList: [{
								color: '#EDEE00',
								title: '黄色系列1',
							},
							{
								color: '#EDEE00',
								title: '黄色系列2',
							}
						]

					},
					{
						color: '#808080',
						title: '灰色系列',
						colorList: [{
								color: '#808080',
								title: '灰色系列1',
							},
							{
								color: '#808080',
								title: '灰色系列2',
							}
						]
					},
					{
						color: '#FF0000',
						title: '红色系列',
						colorList: [{
								color: '#FF0000',
								title: '红色系列1',
							},
							{
								color: '#FF0000',
								title: '红色系列2',
							}
						]
					}, {
						color: '#EDEE00',
						title: '黄色系列',
						colorList: [{
								color: '#EDEE00',
								title: '黄色系列1',
							},
							{
								color: '#EDEE00',
								title: '黄色系列2',
							}
						]

					},
				],
	      mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
        storeId: '',
        tenantId: '',
        orderId: '',
			}
		},
    onLoad(option) {
      let item = JSON.parse(decodeURIComponent(option.item));
      console.log('item', item)
      this.orderId = item.orderId
      const app = getApp();
      this.storeId = app.globalData.storeId
      this.tenantId = app.globalData.tenantId
      this.getSizeList();
      this.getColorManagerList('');
    },
		onReady() {
				let query = uni.createSelectorQuery().in(this);
			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);
				const app = getApp();

				this.scrollViewHeight = this.bottomTop - app.globalData.totalHeight
				// console.log('可滚动距离', this.scrollViewHeight,this.bottomTop,app.globalData.totalHeight);
			}).exec();




		},
		methods: {
      getSizeList() {
        let data = {
          storeId: this.storeId,
          tenantId: this.tenantId
        }
        getSizeManagerList(data).then(res => {
          if (res.code == 200) {
            this.sizeListData = res.data;
            //获取数据的时候foreach循环一下，添加select
            this.sizeListData.forEach((item, index) => {
              this.$set(item, 'select', false)
            })

          }
        })
      },
      getColorManagerList(groupId) {
        let data = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          groupId: groupId
        }
        getColorManagerList(data).then(res => {
          if (res.code == 200) {
            this.colorList = res.data;
            //获取数据的时候foreach循环一下，添加select
            this.colorList.forEach((item, index) => {
              this.$set(item, 'select', false)
            })
          }
        })
      },
			// 录入扎数
			inputDataZhaNum(event, row) {


				console.log('输入值', row, event.target.value);


				var data = {
					zhaNum: event.target.value,
					row: row
				}



				this.inputDataZhaNumList = this.inputDataZhaNumList.filter((item) => {
					return !(item.row == row);
				});


				this.inputDataZhaNumList.push(data);

				console.log('22输入值', this.inputDataZhaNumList);



			},

			// 录入尺码数量

			inputData(event, colum, row, item, itemH) {

				// var value = event.target.value;

				// console.log('输入值', row, colum, event.target.value,item,itemH);

				var data = {
					size: item.sizeName,
					sizeId: item.id,
					select: item.select,
					num: event.target.value,
					row: row, //行号
					colum: colum, //列号
					color: itemH.colorName,
          colorId: itemH.id

				}

				// console.log('输入值', data);


				this.sizeListNewSelect = this.sizeListNewSelect.filter((item) => {
					return !(item.row == row && item.colum == colum);
				});


				this.sizeListNewSelect.push(data);

				console.log('11输入值', this.sizeListNewSelect);








			},

			// 选中行  单选
			chooseImg(index) {

				// 新增 choose 选中 字段 默认是false
				this.colorListNewSelect.forEach((itemH, indexH) => {

					if (index == indexH) {
						itemH.chooseLine = true


					} else {
						itemH.chooseLine = false
					}


				})


				//
				this.sizeListNewSelect.forEach((item, index) => {

					this.inputDataZhaNumList.forEach((zhaItem, zhaIndex) => {
						// 匹配赋值  扎数
						if (item.row == zhaItem.row) {

							this.$set(item, 'zhaNum', zhaItem.zhaNum)

						}

					})

				})



				var dataList = this.sizeListNewSelect.filter((item) => {
					return (item.row == index);
				});

				console.log('选中后的数据', dataList);



			},








			// 选择颜色
			colorSelectClick(item){



				// 重置
				this.colorListNewSelect = []
				console.log('点击颜色', item);
				this.colorList.forEach((inner, index) => {

					if (item.colorName == inner.colorName) {
						inner.select = !inner.select
					}
					// 赋值
					if (inner.select) {
						this.colorListNewSelect.push(inner)
					}





				})

				// 新增 choose 选中 字段 默认是false
				this.colorListNewSelect.forEach((itemH, indexH) => {
					this.$set(itemH, 'chooseLine', false)
				})





			},

			// 选择尺码事件
			selectSizeClick(item){


				this.sizeListData.forEach((itemH)=>{

					if(item.sizeName==itemH.sizeName){
						item.select=!item.select
						console.log('选择尺码',itemH);
					}

				})

			},
      backOnClick() {
        uni.navigateBack({
          delta: 1
        });
        // console.log('点击返回');
      },
      addOrderSplittingUp() {
        let data = {
          splittingUpList: [],
        }
        this.colorListNewSelect.forEach(item=>{
          let i = 0;
          this.sizeListNewSelect.forEach(row=>{
            if(item.id === row.colorId){
              i = i+1;
              let fz = {
                orderId: this.orderId,
                tenantId: this.tenantId,
                storeId: this.storeId,
                bundleCode: i,
                quantity: row.num,
                sizes: row.size,
                colors: item.colorName,
                batchs: item.zhaNum,
              }
              data.splittingUpList.push(fz)
            }
          })
        })
        console.log('data.splittingUpList',data)
        addSplittingUpByList(data).then(res => {
          if (res.code == 200) {
            this.backOnClick()
            // 显示提示信息
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        }).catch((err) => {
          console.log('新增失败', err);
        });

      },

		}
	}
</script>

<style lang="scss">
	.contentCenterListInput1 {
		display: inline-block;
		width: 90rpx;
		height: 70rpx;
		border: #EEEEEE 1rpx solid;

		text-align: center;
		margin: 5rpx;
		font-size: 24rpx;
		background: #F9FCFF;
	}

	.contentCenterListInput {

		display: inline-block;
		width: 90rpx;
		height: 70rpx;
		border: #EEEEEE 1rpx solid;

		text-align: center;
		margin: 5rpx;
		font-size: 24rpx;
	}

	.contentCenterListInputText1 {
		display: inline-block;
		width: 100rpx;
		height: 80rpx;


		text-align: center;

		font-size: 24rpx;
		background: #F9FCFF;
	}
	.contentCenterListNoImg1 {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;

		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-top: 30rpx;
		padding-bottom: 25rpx;
		background: #F9FCFF;
	}


	.contentCenterListNoImg {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;

		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-top: 25rpx;
		padding-bottom: 25rpx;

	}
	.contentCenterListInputText {
		display: inline-block;
		width: 100rpx;
		height: 80rpx;


		text-align: center;

		font-size: 24rpx;
	}
	.contentCenterList {
		width: 100%;
		height: 80rpx;
		display: inline-block;


	}
	.contentCenterTitleText1 {
		width: 150rpx;
		line-height: 80rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #000;
		border-right: #FFFFFF 0.1rpx solid;

		/* display: flex;
		justify-content: center;
		align-items: center; */

		display: inline-block;
		text-align: center;

	}
	.contentCenterTitleText {
		width: 100rpx;
		line-height: 80rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		// color: #FFFFFF;
		color: #000;


		/* display: flex;
		justify-content: center;
		align-items: center; */

		display: inline-block;
		border-right: #FFFFFF 0.1rpx solid;
		text-align: center;
		// vertical-align: middle;
		// background-color: #FF4E00;


	}

	.contentCenterTitle {

		/* 	display: flex;
		justify-content: center;
		align-items: center; */



		display: inline-block;

		width: 100%;
		height: 80rpx;
		align-items: center;





		// margin-top: 20rpx;

	}
	.dataContent {

		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		flex-direction: column;






	}

	.srollColorData {

		width: 630rpx;
		white-space: nowrap;
		display: flex;

		margin-bottom: 50rpx;
	}

	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100vh;

	}
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		position: absolute;
		bottom: 30rpx;





	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;

		border-radius: 20rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;



		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.Content_JiuGongGe_List_Black {

		width: 33.3%;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;

		color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Content_JiuGongGe_List_Blue {
		width: 33.3%;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #666666;
		line-height: 36rpx;

		color: #0081FF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Content_JiuGongGe_List {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		height: 80rpx;
		width: 100%;


	}

	.Content_JiuGongGe_List_Out {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 570rpx;
		height: 80rpx;


	}

	.Content_JiuGongGe_List_OutSide {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 570rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		margin-top: 20rpx;
	}

	.contentSizeTopCheck {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}


	.caichuangContentInput {

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;

		margin-right: 30rpx;
	}

	.caichuangContent {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 630rpx;
		height: 470rpx;
		background: #F5F7F9;
		border-radius: 20rpx;
		margin-bottom: 30rpx;

	}


	.baseListItemColorLeftInnerItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #F5F7F9;
		border-radius: 20rpx;
	}


	.baseListItemColorLeftInner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 100%;
		height: 80rpx;



	}

	.baseListItemColorLeft {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 217rpx;
		height: 380rpx;
		background: #F5F7F9;

		border-radius: 20rpx;
		margin-top: 30rpx;

	}

	.baseListItemColor {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		width: 100%;
		height: 380rpx;
		// background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
	}

	.baseListColor {

		display: flex;
		flex-direction: column;
		width: 100%;
		height: 380rpx;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 10rpx;

	}

	.contentTopTipsText {

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;


	}
	.baseListItemColorLeftInnerTextSelect{
		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		text-align: center;
	}

	.baseListItemColorLeftInnerText {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		text-align: center;
	}

	.baseListItemColorLeftInnerBg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-right: 18rpx;


	}

	.baseListItemColorLeftInnerItemRightSelect{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 88rpx;
		height: 50rpx;
		border: red 1rpx solid;
		border-radius: 16rpx;
		background-color: red;

	}
	.baseListItemColorLeftInnerItemRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 88rpx;
		height: 50rpx;
		background: #F5F7F9;
		border-radius: 16rpx;
	}

.baseListItemColorLeftInnerItemRight2Select{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 216rpx;
	height: 80rpx;
	background: #F5F7F9;
	border: red 1rpx solid;
	border-radius: 20rpx;

}
	.baseListItemColorLeftInnerItemRight2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 216rpx;
		height: 80rpx;
		background: #F5F7F9;
		border-radius: 20rpx;
	}

	.baseListItemColorRightItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		flex: 0 0 calc((100%)/6);
		margin-bottom: 20rpx;
	}

	.baseListItemColorRightItem2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		flex: 0 0 calc((100%)/3);
		margin-bottom: 20rpx;
	}

	.baseListItemColorRight2 {

		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		height: 100%;

		flex-wrap: wrap;
		margin-top: 10rpx;

		// background-color: #0AE1C6;
	}


	.baseListItemColorRight {

		display: flex;
		flex-direction: row;
		justify-content: left;
		width: 100%;
		height: 100%;

		flex-wrap: wrap;
		margin-top: 10rpx;

		// background-color: #0AE1C6;
	}


	.contentSizeTopImg {
		width: 24rpx;
		height: 24rpx;
		margin-right: 5rpx;

	}

	.contentSizeTopRight {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;



	}

	.contentSizeTopTextRight {
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;

		margin-right: 30rpx;
	}

	.contentSizeTopCheckbox {

		display: flex;
		justify-content: center;
		align-items: center;

		margin-top: 10rpx;

	}

	.contentSizeTopText1 {

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
	}

	.contentSizeTopText {



		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		margin-left: 30rpx;


	}

	.contentSizeTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		width: 100%;

		margin-top: 40rpx;






	}

	.line {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;



	}

	.contentSizeTop1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		width: 100%;


	}

	.contentTopTips {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 50rpx;
	}

.contentCenter{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 1000rpx;

		background: #FFFFFF;
		border-radius: 30rpx;
	}
</style>
